<template>
    <div class="step3 devform">
        <div class="devform-title">开票信息</div>
        <el-form
            label-width="180px"
            :model="formline"
            class="dev-form"
            :rules="rules"
            ref="formline"
        >
            <el-form-item label="是否已完成收款" prop="isReceipted">
                <el-select
                    v-model="formline.isReceipted"
                    :disabled="isview"
                    placeholder="请选择"
                    class="w200"
                >
                    <!-- <el-option-group
            v-for="group in dict.type.case_source2"
            :key="group.value"
            :label="group.label"
          > -->
                    <el-option
                        v-for="item in dict.type.payment_collection"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                    <!-- </el-option-group> -->
                </el-select>
            </el-form-item>
            <el-form-item label="票种" prop="type">
                <el-select
                    v-model="formline.type"
                    :disabled="isview"
                    placeholder="请选择"
                    class="maxWidth w200"
                >
                    <el-option
                        v-for="item in dict.type.tick_type"
                        :key="'tick' + item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="发票抬头" prop="title">
                <el-input
                    class="maxWidth"
                    :disabled="isview"
                    v-model="formline.title"
                    placeholder="请输入"
                ></el-input>
            </el-form-item>
            <el-form-item label="纳税人识别号" prop="taxId">
                <el-input
                    class="maxWidth"
                    :disabled="isview"
                    v-model="formline.taxId"
                    placeholder="请输入"
                ></el-input>
            </el-form-item>

            <el-form-item label="开户银行" prop="bank">
                <el-input
                    v-model="formline.bank"
                    :disabled="isview"
                    class="maxWidth"
                    placeholder="请输入"
                ></el-input>
            </el-form-item>
            <el-form-item label="银行账号" prop="bankAccount">
                <el-input
                    v-model="formline.bankAccount"
                    :disabled="isview"
                    class="maxWidth"
                    placeholder="请输入"
                ></el-input>
            </el-form-item>
            <el-form-item label="发票明细" prop="detailType">
                <el-select
                    v-model="formline.detailType"
                    :disabled="isview"
                    placeholder="请选择"
                    class="maxWidth w200"
                >
                    <el-option
                        v-for="item in dict.type.invoice_detail"
                        :key="'tick' + item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="发票金额(元)" prop="amount">
                <el-input-number
                    v-model="formline.amount"
                    :disabled="isview"
                    class="maxWidth"
                    placeholder="请输入"
                ></el-input-number>
            </el-form-item>
            <el-form-item label="发票备注信息" prop="remark">
                <el-input
                    v-model="formline.remark"
                    :disabled="isview"
                    class="maxWidth"
                    placeholder="请输入"
                ></el-input>
            </el-form-item>
            <!-- <el-form-item label="案号" prop="caseCause">
        <el-input
          v-model="formline.caseCause"
          :disabled="isview"
          class="maxWidth"
          placeholder="请输入"
        ></el-input>
      </el-form-item> -->

            <el-form-item class="nopadd" label-width="180px">
                <div slot="label">发票</div>

                <div class="type2-title left flex-title">
                    <el-upload
                        class="upload-demo"
                        :action="uploadUrl"
                        :on-preview="handlePreview"
                        multiple
                        :show-file-list="false"
                        :on-success="uploadinvoce"
                        :on-error="errUpload"
                        :headers="headers"
                    >
                        <el-button size="small" type="primary" v-if="!isview || isExamine"
                            >添加附件</el-button
                        >
                    </el-upload>
                </div>
                <el-table
                    :data="formline.invoices"
                    style="width: 100%"
                    border
                    class="primary-table"
                >
                    <el-table-column
                        prop="filename"
                        label="文档"
                        align="center"
                        width="180"
                    />

                    <el-table-column prop="remark" label="备注" align="center">
                        <template slot-scope="scope">
                            <el-input
                                :disabled="isview"
                                v-model="formline.invoices[scope.$index].remark"
                            ></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="size" label="大小" align="center" />
                    <el-table-column
                        prop="createTime"
                        label="上传日期"
                        align="center"
                    />
                    <el-table-column prop="size" v-if="isview" label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" @click="ondownload(scope.row)">下载</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item class="nopadd" label-width="180px">
                <div slot="label">
                    <span style="color: red">*</span>
                    关联收案审批表
                </div>
                <span :key="formline.caseNo" style="margin-right: 10px">{{
                    formline.caseNo
                }}</span>
                <el-button
                    icon="el-icon-plus"
                    size="mini"
                    @click="choseCase(2)"
                    v-if="!isview"
                    >选择案件
                </el-button>
            </el-form-item>
            <el-form-item label="附件">
                <div class="type2-title left flex-title">
                    <el-upload
                        class="upload-demo"
                        :action="uploadUrl"
                        :on-preview="handlePreview"
                        multiple
                        :show-file-list="false"
                        :on-success="uploadAttechment"
                        :on-error="errUpload"
                        :headers="headers"
                    >
                        <el-button size="small" type="primary" v-if="!isview"
                            >添加附件</el-button
                        >
                    </el-upload>
                </div>
                <el-table
                    :data="formline.attachments"
                    style="width: 100%"
                    border
                    class="primary-table"
                >
                    <el-table-column
                        prop="filename"
                        label="文档"
                        align="center"
                        width="180"
                    />

                    <el-table-column prop="remark" label="备注" align="center">
                        <template slot-scope="scope">
                            <el-input
                                :disabled="isview"
                                v-model="
                                    formline.attachments[scope.$index].remark
                                "
                            ></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="size" label="大小" align="center" />
                    <el-table-column
                        prop="createTime"
                        label="上传日期"
                        align="center"
                    />
                    <el-table-column prop="size" v-if="isview" label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" @click="ondownload(scope.row)">下载</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <!-- suit==1诉讼类型 -->

            <el-form-item label="图片" prop="handlers">
                <div class="type2-title left">
                    <el-upload
                        class="upload-demo"
                        :action="uploadUrl"
                        :on-preview="handlePreview"
                        multiple
                        :show-file-list="false"
                        :on-success="uploadhandles"
                        :on-error="errUpload"
                        :headers="headers"
                    >
                        <el-button size="small" type="primary" v-if="!isview"
                            >添加图片</el-button
                        >
                    </el-upload>
                </div>
                <el-table
                    :data="formline.images"
                    style="width: 100%"
                    border
                    class="primary-table"
                >
                    <el-table-column
                        prop="filename"
                        label="文档"
                        align="center"
                        width="180"
                    >
                        <template slot-scope="scope">
                            <!-- <el-image
                                style="width: 100px; height: 100px"
                                :src="scope.row.url"
                                v-if="isview"
                                :preview-src-list="[scope.row.url]">
                            </el-image> -->
                            <span >
                                {{ scope.row.filename }}
                            </span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="remark" label="备注" align="center">
                        <template slot-scope="scope">
                            <el-input
                                :disabled="isview"
                                v-model="formline.images[scope.$index].remark"
                            ></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="size" label="大小" align="center" />
                    <el-table-column
                        prop="createTime"
                        label="上传日期"
                        align="center"
                    />
                    <el-table-column prop="size" v-if="isview" label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" @click="ondownload(scope.row)">下载</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>

            <template v-if="isview">
                <el-table
                    :data="formline.reviewerList"
                    style="width: 100%"
                    border
                    class="primary-table"
                >
                    <el-table-column
                        prop="userName"
                        label="审批人员"
                        align="center"
                        width="200"
                    />

                    <el-table-column
                        prop="remark"
                        label="审核状态"
                        align="center"
                    />

                    <el-table-column
                        prop="auditTime"
                        label="审核时间"
                        align="center"
                    >
                        <template slot-scope="scope">
                            {{getDate(scope.row.auditTime)}}
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <template v-else>
                <div class="devform-title">审核人员</div>
                <el-form-item
                    label="审核人员"
                    class="taxAddress"
                    prop="reviewers"
                >
                    <el-select
                        multiple
                        v-model="formline.reviewers"
                        filterable
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in userList"
                            :key="item.userId"
                            :label="item.userName"
                            :value="item.userId"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="抄送" class="taxAddress">
                    <el-select
                        multiple
                        v-model="formline.makeList"
                        filterable
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in userList"
                            :key="item.userId"
                            :label="item.userName"
                            :value="item.userId"
                        >
                        </el-option>
                    </el-select> </el-form-item
            ></template>

            <template v-if="isExamine">
                <el-form-item label="审批" required>
                    <el-radio-group v-model="formline.auditStatus">
                        <el-radio label="1">同意</el-radio>
                        <el-radio label="2">不同意</el-radio>
                    </el-radio-group>
                    <!-- <el-input v-model="formline.examineRemark"></el-input> -->
                </el-form-item>
            </template>
        </el-form>
        <div class="step3-foot">
            <el-button @click="onsubmit" type="primary" v-if="!isview"
                >提交</el-button
            >
            <el-button @click="onExamine(1)" type="primary" v-if="isExamine"
                >确定</el-button
            >
            <!-- <el-button @click="onExamine(2)" type="danger" v-if="isExamine"
                >拒绝</el-button
            > -->
            <el-button @click="onCancle" type="primary">关闭</el-button>
        </div>
        <caseModalVue ref="caseModalVue" @submit="onsubCase" />
    </div>
</template>

<script>
import { invoiceadd, defaultList, invoicedetail, invoiceAudit } from "@/api/case/case";
import { listDept } from "@/api/system/dept";
import moment from "moment";
import { getToken } from "@/utils/auth";
import { getAllUser } from "@/api/met";
import caseModalVue from "./caseModal.vue";

// import { getDefaultList } from ""
export default {
    dicts: ["payment_collection", "tick_type", "invoice_detail"],
    data() {
        let paymentvaild = (rule, value, callback) => {
            if (!this.formline.invoices.length < 1) {
                callback(new Error("请上传发票！"));
            } else {
                callback();
            }
        };

        let fixedCostsvaild = (rule, value, callback) => {
            callback();
        };
        let acceptOrgName = (rule, value, callback) => {
            if (!this.formline.suitInfo.acceptOrgName) {
                callback(new Error("请输入受理机构"));
            } else {
                callback();
            }
        };
        let taxIdvaild = (rule, value, callback) => {
            if (!this.formline.invoiceInfo.taxId) {
                callback(new Error("请输入纳税识别号"));
            } else {
                callback();
            }
        };
        return {
            headers: { Authorization: "Bearer " + getToken() },
            uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
            // headers: {
            //   Authorization: "Bearer " + getToken(),
            // },
            userList: [],
            isview: false, //是否是擦看界面
            test: "1",
            formline: {
                Related: [], // 抄送给
                attachments: [],
                invoices: [],
                images: [],
                type: "",
                title: "",
                taxId: "",
                bank: "",
                caseCause: "",
                detailType: "",
                amount: "",
                remark: "",
                detailType: "",
                amount: "",
                reviewers: [],
                makeList: [],
                bankAccount: "",
                caseId: "",
                caseNo: "",
                examineRemark: "", // 审核内容
                auditStatus: ""
            },
            belongOrg: [], //部门
            rules: {
                invoices: [
                    {
                        validator: paymentvaild,
                        trigger: "change",
                        required: true,
                    },
                ],
                examineRemark: [
                  {
                    required: true,
                    message: "请输入审核内容",
                    trigger: "change",
                  },
                ],
                isReceipted: [
                    {
                        required: true,
                        message: "请选择收款状态",
                        trigger: "change",
                    },
                ],
                type: [
                    {
                        required: true,
                        message: "请选择票种",
                        trigger: "change",
                    },
                ],
            },
            isExamine: false,
        };
    },
    props: {
        param: {
            type: Object,
            require: () => {},
        },
        id: {
            type: String,
            require: "",
        },
    },
    components: { caseModalVue },
    created() {
        this.getAllUser();
        if (this.$route.query.id) {
            this.getData();
        } else {
            defaultList({ type: 1 }).then((res) => {
                this.formline.reviewers = res.data.map((v) => v.userId);
            });
        }
        let { type, examine } = this.$route.query;
        this.isview = type == "view";
        this.isExamine = examine == "1";
    },
    computed: {},
    methods: {
        getDate (date) {
            return date ? moment(date).format('YYYY-MM-DD HH:mm:ss'): ''
        },
        //文档下载
        ondownload(row) {
            console.log(row);
            // download({ fileName: row.filename, url: row.url });
            let resource = `${row.url}`;
            this.$download.resource(resource);
        },
        onExamine() {
            if  (!this.formline.auditStatus) return this.$message.warning("请选择是否同意")
          this.$refs.formline.validate((valid) => { // 审批
            if (valid) {
                let { auditStatus, id, invoices } = this.formline
                let params = {
                    auditStatus,
                    invoices:invoices || [],
                    remark: auditStatus == 1 ? '同意' : '不同意',
                    id
                }
                invoiceAudit(params).then(res => {
                    this.$message.success('保存成功')
                    this.$router.back()
                })
            }
          })
        },
        choseCase() {
            this.$refs.caseModalVue.open();
        },
        onsubCase(val) {
            console.log(val, "2222");
            this.$set(this.formline, "caseId", val.id);
            this.$set(this.formline, "caseNo", val.caseNo);
        },
        getAllUser() {
            //获取用户
            getAllUser().then((res) => {
                this.userList = res.data;
            });
        },
        //获取详情
        getData() {
            console.log("获取详情");
            invoicedetail(this.$route.query.id).then((res) => {
                console.log(res);

                this.formline = res.data;
                this.formline.isReceipted = String(res.data.isReceipted);
            });
        },
        //删除案件当事人表格行
        ondel(index, name) {
            this.formline[name].splice(index, 1);
        },

        //下载合同模板
        dowlonfile() {
            this.$refs.dowlonFileModal.open();
        },

        handlePreview(val) {
            //点击文件
            console.log("上传", val);
        },

        errUpload() {
            console.log("上传失败了");
        },
        successUpload(arrname, response, file, fileList) {
            //合同上传成功
            console.log("上传成功", response, file, fileList);
            if (response.code == 200) {
                this.formline[arrname].push({
                    filename: response.originalFilename,
                    size: file.size,
                    remark: "",
                    createTime: moment().format("yyyy-MM-DD HH:mm:ss"),
                    url: response.url,
                    mimeType: "",
                });
                console.log(this.formline, arrname);
            } else {
                this.$message.error(response.msg);
            }
        },
        //发票附件上传
        uploadinvoce(response, file, fileList) {
            this.successUpload("invoices", response, file, fileList);
        },
        //附件上传
        uploadAttechment(response, file, fileList) {
            this.successUpload("attachments", response, file, fileList);
        },
        //附件上传
        uploadhandles(response, file, fileList) {
            this.successUpload("images", response, file, fileList);
        },
        //添加关联收案审批表
        onadd(type) {
            this.formline.Related.push({ reference: "", remark: "" });
        },
        //确定
        onsubmit() {
            this.$refs.formline.validate((valid) => {
                if (valid) {
                    // console.log("提交成功");
                    console.log(this.formline);
                    if (!this.formline.caseNo) {
                        this.$message.error("请选择案件！");
                    } else {
                        this.$emit("submit", this.formline);
                        invoiceadd(this.formline).then((res) => {
                            console.log(res);
                            this.$message.success("提交成功");
                            this.$router.back();
                        });
                    }
                } else {
                    console.log("error submit!!");
                    this.$message.warning("请现将数据填写完整！");
                    return false;
                }
            });
        },
        //取消
        onCancle() {
            this.$router.back();
        },
    },
};
</script>

<style lang="scss" scoped>
.maxWidth {
    max-width: 600px;
}

::v-deep .el-select.w200.el-select--medium {
    width: 200px;
}
.step3 {
    max-width: 1200px;
    display: flex;
    justify-content: center;
    padding: 20px;

    &-foot {
        text-align: center;
        margin-top: 30px;
    }

    .w300 {
        width: 300px;
    }

    .m30 {
        margin-left: 30px;
    }

    .col {
        padding: 5px 3px 13px 3px;
        background-color: $--color-labelbg;
    }
}

.step3-foot {
    background: white;
    text-align: center;
    padding: 10px;
    z-index: 100;
}

.dev-form {
    // height: calc(100vh - 320px);
    // overflow: auto;
    // padding-bottom: 60px;
}

::v-deep .el-input--medium .el-input__inner {
    height: 32px;
    line-height: 32px;
}

::v-deep .dev-form .el-form-item__error {
    bottom: 1px;
    top: auto;
    left: 10px;
}

::v-deep .dev-form .el-form-item__content {
    padding-bottom: 13px;
}

::v-deep .el-input-number--medium .el-input-number__increase,
.el-input-number--medium .el-input-number__decrease {
    height: 30px;
    top: 2px;
}

::v-ddeep .el-input.el-input--medium.el-input--suffix {
    min-width: 140px !important;
}

::v-deep .el-select.el-select--medium {
    width: 100%;
}

::v-deep span.el-input-number__decrease {
    height: 30px;
    top: 2px;
}

::v-deep.el-input.el-input--medium.error-phone::after {
    content: "联系方式不正确！";
    position: absolute;
    bottom: -23px;
    width: 100%;
    left: 11px;
    font-size: 11px;
    color: #ff4949;
}

::v-deep .dev-form .el-form-item__label {
    flex-shrink: 0;
}

::v-deep .dev-form .el-form-item__content {
    width: 0;
    flex: 1;
}

.dowon-btn {
    height: 33px;
    position: relative;
    top: 2px;
    margin-left: 10px;
}

.inline-block {
    display: inline-block;
}

.flex-title {
    display: flex;
}
</style>
